import React, { Component } from 'react';
import { Table, Divider, message, Modal, Tag } from 'antd';
import { inject, observer } from 'mobx-react';
import DictItemDrawer from './DictItemDrawer';


@inject('store')
@observer
class Main extends Component {
  paginationHandler = (pagination) => {
    this.props.store.paginationListDict(pagination.current, pagination.pageSize);
  };

  deleteDictHandler = (record) => {
    let that = this;
    Modal.confirm({
      title: '确认删除这个数据字典吗？',
      async onOk() {
        await that.props.store.deleteDict(record);
        message.success('删除数据字典成功！');
      },
    });
  };

  render() {
    const { store } = this.props;
    const pagination = {
      showSizeChanger: true,
      pageSize: store.dictListData.pageSize,
      current: store.dictListData.pageNo,
      pageSizeOptions: ['10', '20', '50', '100'],
      total: store.dictListData.total,
      showQuickJumper: true,
    };

    let columns = [
      { title: '所属分类', dataIndex: 'categoryName', key: 'categoryName', width: 350 },
      { title: '字典名称', dataIndex: 'name', key: 'name', width: 250 },
      { title: '字典标识', dataIndex: 'key', key: 'key', width: 200 },
      { title: '描述', dataIndex: 'remark', key: 'remark' }, {
        title: '当前状态',
        dataIndex: 'status',
        key: 'status',
        width: 80,
        align: 'center',
        render: function(text, record) {
          if (record.status == 1) {
            return <Tag color={'#2db7f5'}>启用</Tag>;
          } else {
            return <Tag color={'black'}>停用</Tag>;
          }
        },
      }, {
        title: '操作', width: 200, align:'center', render: (text, record, index) => {
          let disabled = record.isFixed ? 'disabled' : null;
          return (<span>
            <a onClick={() => store.showDictDialog(record)}>编辑</a>
            <Divider type="vertical"/>
            <a disabled={disabled} onClick={() => this.deleteDictHandler(record)}>删除</a>
            <Divider type="vertical"/>
            <a disabled={disabled} onClick={() => store.showDictItemDrawer(record)}>数据项</a>
          </span>);
        },
      }];
    return (
      <div>
        <Table rowKey="id" size={'middle'} columns={columns} dataSource={store.dictListData.dataSource}
               loading={store.dictListData.loading} onChange={this.paginationHandler}
               pagination={pagination}/>
        <DictItemDrawer/>
      </div>
    );
  }
}

export default Main;
